import { useEffect, useState } from 'react';
import { StyleSheet } from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';
import { useSelector } from 'react-redux';

import { t } from 'i18next';

import useSubscribe from '../hook';
import { RootState } from '@/stores/store';

export const CommonSpinner = () => {
  const isSubscribing = useSelector((state: RootState) => state.display.isSubscribing);
  return (
    <Spinner visible={isSubscribing} textContent={t('subscription.right.Subscribing')} textStyle={styles.spinner} />
  );
};

const styles = StyleSheet.create({
  spinner: {
    color: '#FFF',
  },
});
